<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
		<title>杭州来慕摄影工作室</title>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.0.min.css">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/fonts.css" />
	</head>

	<body>
		<!--页面头部导航-->
		<header id="header" class="horizontal header-horizontal">
			<div class="head">
				<div class="logo-container">
					<a href="index.html" class="logo image-logo" title="jinfuren"><img src="img/logo/lamourlogo_03.png" alt="jinfuren"></a>
				</div>
				<nav id="access" class="navigation-bar">
					<div class="menu-container loaded">
						<ul id="menu-main-menu" class="top-menu opener-icons-off">
							<li id="" class="menu-item menu-item-active">
								<a href="index.html"><span>Home</span><span>来慕主页 </span></a>
							</li>
							<li id="" class="menu-item">
								<a href="photographs.html"><span>Photographs</span><span>精美作品</span></a>
							</li>
							<li id="" class="menu-item">
								<a href="aboutus.html"><span>About Us</span><span>关于我们</span></a>
							</li>
							<li id="" class="menu-item">
								<a href="service.html"><span>Service</span><span>专业服务</span></a>
							</li>
							<li id="" class="menu-item">
								<a href="contactus.html"><span>Contact Us</span><span>联系我们</span></a>
							</li>
						</ul>
					</div>
				</nav>
<!--				<div id="header-tools" class="icons-0 only-menu">
					<div id="mobile-menu-opener" class="icon-menu tool" title="Main menu"></div>
				</div>-->
				<div class="socials icons-only">
					<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=491622050&site=qq&menu=yes" class="qq"><i class="icon-qq"></i></a>
					<a class="wechat" onclick="$('.dim').addClass('dim-active');"><i class="icon-wechat"></i></a>
					<a target="_blank" href="http://weibo.com/qiein" class="weibo"><i class="icon-weibo"></i></a>
				</div>
			</div>
		</header>
		<!--页面轮播-->
		<div class="content">
			<div class="swiper-container gallery-top">
				<div class="swiper-wrapper">
					<div class="swiper-slide bg-cover" style="background-image: url(img/1.jpg)">
						<a href="detail.html" class="slide"></a>
					</div>
					<div class="swiper-slide bg-cover" style="background-image: url(img/2.jpg)">
						<a class="slide"></a>
					</div>
					<div class="swiper-slide bg-cover" style="background-image: url(img/3.jpg)">
						<a class="slide"></a>
					</div>
					<div class="swiper-slide bg-cover" style="background-image: url(img/4.jpg)">
						<a class="slide"></a>
					</div>
				</div>
				<!-- 如果需要导航按钮 -->
				<div class="swiper-button-prev swiper-button-white"></div>
				<div class="swiper-button-next swiper-button-white"></div>

			</div>
			<div class="swiper-container gallery-thumbs">
				<div id="slider-controls" class="show-with-slider with-thumbs show">
					<span class="slides-count">
						<span class="num">1</span>
						<span class="of">3</span>
					</span>
				</div>
				<div class="swiper-wrapper" style="bottom: -60px;">
					<div data-id="0" class="swiper-slide bg-cover swiper-slide-active" style="background-image: url(&quot;img/1.jpg&quot;);">
						<div class="slide-caption">
							<h2 class="title">
								<span>闺蜜去三亚</span>
							</h2>
							<div class="description">
								和闺蜜一起环游三亚，感谢一直有你的世界。
								<div class="a2a_kit a2a_kit_size_18 addtoany_list">
									<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=491622050&site=qq&menu=yes" class="qq"><i class="icon-qq"></i></a>
									<a class="wechat"><i class="icon-wechat"></i></a>
									<a target="_blank" href="http://weibo.com/qiein" class="weibo"><i class="icon-weibo"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div data-id="1" class="swiper-slide bg-cover" style="background-image: url(&quot;img/2.jpg&quot;);">
						<div class="slide-caption">
							<h2 class="title">
								<span>三亚带上男友</span>
							</h2>
							<div class="description">
								拖上家里蹲的男友，体验一把海滩之行吧。
								<div class="a2a_kit a2a_kit_size_18 addtoany_list">
									<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=491622050&site=qq&menu=yes" class="qq"><i class="icon-qq"></i></a>
									<a class="wechat"><i class="icon-wechat"></i></a>
									<a target="_blank" href="http://weibo.com/qiein" class="weibo"><i class="icon-weibo"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div data-id="2" class="swiper-slide bg-cover" style="background-image: url(&quot;img/3.jpg&quot;);">
						<div class="slide-caption">
							<h2 class="title">
								<span>三亚海边浪漫</span>
							</h2>
							<div class="description">
								每一张胶片，记录的都是旅途中的幸福感。
								<div class="a2a_kit a2a_kit_size_18 addtoany_list">
									<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=491622050&site=qq&menu=yes" class="qq"><i class="icon-qq"></i></a>
									<a class="wechat"><i class="icon-wechat"></i></a>
									<a target="_blank" href="http://weibo.com/qiein" class="weibo"><i class="icon-weibo"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div data-id="3" class="swiper-slide bg-cover" style="background-image: url(&quot;img/4.jpg&quot;);">
						<div class="slide-caption">
							<h2 class="title">
								<span>三亚海边时尚</span>
							</h2>
							<div class="description">
								海风吹过的，是一生的爱与依恋。
								<div class="a2a_kit a2a_kit_size_18 addtoany_list">
									<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=491622050&site=qq&menu=yes" class="qq"><i class="icon-qq"></i></a>
									<a class="wechat"><i class="icon-wechat"></i></a>
									<a target="_blank" href="http://weibo.com/qiein" class="weibo"><i class="icon-weibo"></i></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>			
			
		</div>
		<!--页面页脚部分-->
		<footer id="footer" class="to-move centered full no-move">
			<div class="foot-items">
				<div class="foot-content">
					<div class="foot-text"> © 2009-2017版权所有 · 杭州良缘摄影有限公司 </div>
				</div>
			</div>
		</footer>
		<div class="dim">
			<div class="weixin no-move">
				<span>
				<img src="img/wx_qr.jpg" alt="官方微信">
				<h2>
					<p>使用微信扫码关注官方微信号</p>
				</h2>
				</span>
			</div>
			<div class="dim_bg" onclick="$('.dim').removeClass('dim-active');"></div>
		</div>
		<!--轮播JS-->
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript" src="js/swiper-3.4.0.min.js"></script>
		<script type="text/javascript" src="js/main.js" ></script>
		<script>
		//轮播JS
		/*			var swiper = new Swiper('.swiper-container', {
						paginationClickable: '.swiper-pagination',
						nextButton: '.swiper-button-next',
						prevButton: '.swiper-button-prev',
						loop:true,
						spaceBetween: sz30,
						autoplay:2500,
						effect: 'fade',
						grabCursor:true,
						autoplayDisableOnInteraction:false,
					});*/
		
		var galleryTop = new Swiper('.gallery-top', {
			nextButton: '.swiper-button-next',
			prevButton: '.swiper-button-prev',
			spaceBetween: 10,
			effect:'fade',
			speed:2000,
			autoplay : 3000,
			grabCursor: true,
			autoplayDisableOnInteraction: false,
			onInit: function(swiper){
				$('#slider-controls .of').html(swiper.slides.length);
			},
			onSlideChangeStart: function(swiper){
				$('#slider-controls .num').html(swiper.activeIndex + 1);
				var active = $('.gallery-thumbs .swiper-slide[data-id="'+swiper.activeIndex+'"]');
				var previous = $('.gallery-thumbs .swiper-slide[data-id="'+swiper.previousIndex+'"]');
				previous.addClass('out').removeClass('swiper-slide-active');
				active.addClass('swiper-slide-active');
				setTimeout(function(){
					$('.gallery-thumbs .swiper-slide').removeClass('out');
				},400);
		    }
		});
		
		$('.gallery-thumbs .swiper-slide').on('click',function(){
			var index = $(this).data('id');
			galleryTop.slideTo(index, 2000, true);//切换到第一个slide，速度为1秒			
		});

		</script>
	</body>

</html>